<template>
  <view class="custom-picker">
    <view class="selected-value" @click="toggleDropdown">
      {{ selectedItem }}
    </view>
    <view class="dropdown" v-if="showDropdown">
      <view 
        class="dropdown-item" 
        v-for="(item, index) in items" 
        :key="index" 
        @click="selectItem(item)"
      >
        {{ item }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true
    },
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      showDropdown: false,
      selectedItem: this.value
    };
  },
  watch: {
    value(newVal) {
      this.selectedItem = newVal;
    }
  },
  methods: {
    toggleDropdown() {
      this.showDropdown = !this.showDropdown;
    },
    selectItem(item) {
      this.selectedItem = item;
      this.showDropdown = false;
      this.$emit('input', item);
    }
  }
}
</script>

<style>
.custom-picker {
  position: relative;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  width: 100%;
}

.selected-value {
  cursor: pointer;
}

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border-top: none;
  z-index: 1000;
}

.dropdown-item {
  padding: 10px;
  cursor: pointer;
}

.dropdown-item:hover {
  background-color: #f0f0f0;
}
</style>
